<template>
  <div class="process-management-system">
    <!-- 顶部导航 -->
    <header class="bg-white shadow-sm">
      <div class="mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center">
          <i class="el-icon-s-management text-blue-500 text-2xl mr-2"></i>
          <h1 class="text-xl font-semibold text-gray-800">流程管理系统</h1>
        </div>
        <div class="flex items-center">
          <el-button type="text" icon="el-icon-user" class="mr-2">管理员</el-button>
          <el-button type="text" icon="el-icon-setting">设置</el-button>
        </div>
      </div>
    </header>
    <div class="flex">
      <el-menu :collapse-transition="false" router class="border-none" activeTextColor="blue" :default-active="activeTab">
        <template v-for="menu in menus" :key="menu.index">
          <el-menu-item :index="menu.index">
            <i :class="menu.iconClass"></i>
            <template #title>{{ menu.title }}</template>
          </el-menu-item>
        </template>
      </el-menu>
      <div class="flex-1">
        <router-view></router-view>
      </div>
    </div>

  </div>
</template>

<script setup>
import {ref} from 'vue'

const users = ref(["admin", "leader_zhang", "hr_wang", "ceo_li"])
const currentUser = ref('admin')

const activeTab = ref('ProcessDefinitions')
const menus = [
  {index: '/ProcessDefinitions', title: '流程定义', iconClass: 'fas fa-id-card'},
  {index: '/ProcessInstance', title: '流程列表', iconClass: 'fas fa-id-card'},
  {index: '/TaskList', title: '任务列表列表', iconClass: 'fas fa-id-card'}
]

</script>

<style scoped>
</style>